<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import ClockDisplay from './components/ClockDisplay.vue';
import NavMenu from './components/NavMenu.vue';

const showNav = ref(false);

// 滚动事件处理
const handleScroll = () => {
  showNav.value = window.scrollY > 100;
};

onMounted(() => {
  window.addEventListener('scroll', handleScroll);
});
onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
});

</script>

<template>
  <div id="app">
    <ClockDisplay />
    <NavMenu v-show="showNav" />
   
  </div>
</template>

<style scoped>
.setting-btn {
  position: fixed;
  top: 24px;
  left: 24px;
  font-size: 28px;
  cursor: pointer;
  z-index: 1000;
  color: var(--el-text-color-primary);
  background: rgba(255,255,255,0.08);
  padding: 8px;
  border-radius: 12px;
  transition: all 0.3s ease;
}
.setting-btn:hover {
  background: rgba(255,255,255,0.15);
  transform: scale(1.05);
}
.setting-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.a-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.a-image-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
</style>
